<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<!-- 搜索组件 -->
			<view class="sub-branch-search-box">
				<view class="sub-branch-search-title">若未查询到对应信息，请输入支行地区名称查询</view>
				<view class="sub-branch-search-content">
					<image class="search-icon" src="/static/my/search_icon.png" mode="aspectFit"></image>
					<input class="search-input" type="text" placeholder="请输入支行名称" placeholder-class="search-input-placeholder" v-model="keywords" @blur="searchAction" />
				</view>
			</view>
		</template>
		<!-- 支行列表 -->
		<view class="sub-barnch-list">
			<view class="sub-barnch-item" v-for="item in dataList" :key="item.bankId" @tap="selectSubBarnch(item)">
				<text class="sub-barnch-name">{{item.bankName}}</text>
				<image class="sub-barnch-right-icon" src="/static/login/right_gray_icon.png" mode="aspectFit"></image>
				<view class="sub-barnch-line"></view>
			</view>
		</view>
	</z-paging>

</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getSubBankList } from '@/common/api/api.js'
	import { useFormStore } from '@/common/stores'
	const formStore = useFormStore()
	const pagingRef = ref(null)
	// 搜索关键词
	const keywords = ref('')
	//支行列表数据
	const dataList = ref([])
	
	//选择支行
	const selectSubBarnch = (item) => {
		formStore.bankName = item.bankName
		formStore.bankNo = item.bankNo
		uni.navigateBack()
	}
	// 搜索
	const searchAction = () => {
		pagingRef.value.reload()
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.bankName = keywords.value
		if(!uni.$uv.test.empty(formStore.bankBranchNo)){
			params.bankBranchNo = formStore.bankBranchNo
		}
		if(!uni.$uv.test.empty(formStore.bankBranchName)){
			params.bankBranchName = formStore.bankBranchName
		}
		if(!uni.$uv.test.empty(formStore.settleCardCityCode)){
			params.cityName = formStore.settleCardCityCode
		}
		else{
			params.cityName = formStore.settleCardProvinceCode
		}
		const res = await getSubBankList(params, pageNo)
		const list = res.result
		if(pageNo == 1){
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.sub-branch-search-box {
		background-color: $xh-bg-color;
		height: 202rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.sub-branch-search-title {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 26rpx;
			color: $xh-color-9;
		}

		.sub-branch-search-content {
			display: flex;
			align-items: center;
			height: 72rpx;
			background-color: white;
			border-radius: 36rpx;
			border: 1px solid #cecece;
			padding: 0 30rpx;

			.search-icon {
				width: 48rpx;
				height: 48rpx;
				flex-shrink: 0;
			}

			.search-input {
				font-size: 28rpx;
				flex: 1;
				margin-left: 20rpx;
			}

			.search-input-placeholder {
				color: #ccc;
			}
		}
	}

	.sub-barnch-list {
		background-color: white;

		.sub-barnch-item {
			display: flex;
			align-items: center;
			padding: 30rpx 30rpx;
			position: relative;

			.sub-barnch-right-icon {
				width: 24rpx;
				height: 24rpx;
				margin-left: auto;
				flex-shrink: 0;
			}

			.sub-barnch-name {
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-right: 30rpx;
			}

			.sub-barnch-line {
				position: absolute;
				left: 30rpx;
				right: 0;
				bottom: 0;
				height: 1px;
				transform: scaleY(0.5);
				background-color: $xh-line-color;
			}
		}
	}
</style>